<style lang="stylus" rel="stylesheet/stylus" src="./countryRealTime.styl"></style>
<template>
  <div class="realTimeDataContent accQuery countryRealClass" :style="{width:pageWidth}" v-loading="!datas" element-loading-text="拼命加载中">
    <div class="right_header" :style='{"background":this.$store.getters.theme[5]}'>
      <div class="listName" :style='{"color":this.$store.getters.theme[6]}'> <i class="icon iconfont">&#xe7d8;</i>
        <span class="title1">当前位置/游戏分析/实时数据/</span>
        <span>{{title}}</span>
        <span class="title1" style="font-size:10px;">（数据更新频率为1分钟）</span>
      </div>
      <div class="right_header_time">
        <div class="block">
          <span>查看日期：</span>
          <el-date-picker 
                size="small"
                v-model="date"
                type="date"
                placeholder="选择日期" @change='dateChange'></el-date-picker>
          <span>对比日期：</span>
          <el-date-picker 
                size="small"
                v-model="cdate"
                type="date"
                placeholder="选择日期" @change='cdateChange'></el-date-picker>
        </div>
      </div>
      <div class="choose_plat">
        <el-menu :theme="this.$store.getters.theme[4]" 
        :default-active="navDefault" class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <!-- <el-menu-item index="0" :style='{"border":"1px solid"+this.$store.getters.theme[0]}'>全平台</el-menu-item>
          <el-menu-item index="3" :style='{"border":"1px solid"+this.$store.getters.theme[0]}'>安卓</el-menu-item>
          <el-menu-item index="2" :style='{"border":"1px solid"+this.$store.getters.theme[0]}'>iOS</el-menu-item>
          <el-menu-item index="9" :style='{"border":"1px solid"+this.$store.getters.theme[0]}'>通用</el-menu-item> -->
          <el-menu-item index="4" :style='{"border":"1px solid"+this.$store.getters.theme[0]}'>高级筛选</el-menu-item>
        </el-menu>
      </div>
    </div>
    <div class="right_content">
      <v-details :datas="datas"></v-details>
      <div class="listChart1" v-if="false">
        <div class="listChart1_title" :style='{"background":this.$store.getters.theme[5],"color":this.$store.getters.theme[6]}'>
          <p class='zoomIn animated'>整体实时在线 (更新频率1分钟,不包含排队)</p>
          <div class="chart1-introduce">
            <el-popover
              ref="listChart1_popo"
              placement="top-start"
              title="在线玩家趋势"
              width="200"
              trigger="hover"
              content="每个时间点的在线玩家数"></el-popover> <i class="el-icon-information" v-popover:listChart1_popo></i>
          </div>
        </div>
        <div style="height:350px;width:100%;position:absolute;" v-if="realLoadShow" v-loading="realLoadShow" element-loading-text="拼命加载中"></div>
        <div class="realTimeData" id='realTimeData'></div>
      </div>
      <div class="listChart2">
        <div class="listChart1_title" :style='{"background":this.$store.getters.theme[5],"color":this.$store.getters.theme[6]}'>
          <p class='zoomIn animated'>分小时累计数据</p>
          <div class="chart1-introduce">
            <el-popover
              ref="listChart1_popo"
              placement="top-start"
              title="分小时累计数据"
              width="200"
              trigger="hover"
              content="每个时间点的在线玩家数"></el-popover>
            <i class="el-icon-information" v-popover:listChart1_popo></i>
          </div>
        </div>
        <div style="height:450px;width:100%;position:absolute;" v-if="realLoadShow" v-loading="realLoadShow" element-loading-text="拼命加载中"></div>
        <el-tabs type="border-card">
          <el-tab-pane label="新增账号数">
            <div class="newAccount" id='newAccount'></div>
          </el-tab-pane>
          <el-tab-pane label="付费金额(￥)" >
            <div class="payMoney" id='payMoney'></div>
          </el-tab-pane>
        </el-tabs>
        <el-collapse accordion>
          <el-collapse-item>
            <template slot="title">
              点击查看分小时累计详细数据
              <el-button type="primary" size="mini" class="excel"  @click.stop="excel('','点击查看分小时累计详细数据')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
                <i class="icon iconfont">&#xe7f0;</i> 导出excel
              </el-button>
            </template>
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column prop="hour" label="日期" width="150" align="center"></el-table-column>
              <el-table-column label="新增账号数" align="center">
                <el-table-column prop="newUserLookValue" :label="date"  align="center"></el-table-column>
                <el-table-column prop="newUserCompareValue" :label="cdate"  align="center"></el-table-column>
              </el-table-column>
              <el-table-column label="累计实时次留" align="center">
                <el-table-column prop="userSecond2LeftHourLookValue == 0?'':userSecond2LeftHourLookValue" :label="date"  align="center"></el-table-column>
                <el-table-column  :label="cdate"  align="center">
                  <template scope="scope">
                    <span class='grogressSpan' style="margin-left: 10px">{{ Number(scope.row.userSecond2LeftHourCompareValue)}}%</span>
                    <el-progress :text-inside="true" :stroke-width="18" :percentage="Number(scope.row.userSecond2LeftHourCompareValue)" :show-text='false' status="success"></el-progress>
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column label="付费金额(￥)" align="center">
                <el-table-column prop="payLookValue" :label="date"  align="center"></el-table-column>
                <el-table-column prop="payCompareValue" :label="cdate"  align="center"></el-table-column>
              </el-table-column>
            </el-table>
          </el-collapse-item>
        </el-collapse>
      </div>
      <div class="listChart3">
        <div class="listChart1_title" :style='{"background":this.$store.getters.theme[5],"color":this.$store.getters.theme[6]}'>
          <p class='zoomIn animated'>分小时数据</p>
          <div class="chart1-introduce">
            <el-popover
              ref="listChart1_popo"
              placement="top-start"
              title="分小时数据"
              width="200"
              trigger="hover"
              content="每个时间点的在线玩家数"></el-popover>
            <i class="el-icon-information" v-popover:listChart1_popo></i>
          </div>
        </div>
        <div style="height:450px;width:100%;position:absolute;" v-if="realLoadShow" v-loading="realLoadShow" element-loading-text="拼命加载中"></div>
        <el-tabs type="border-card">
          <el-tab-pane label="新增账号数">
            <div class="charts" id='account'></div>
          </el-tab-pane>
          <el-tab-pane label="付费账号数" >
            <div class="charts" id='id'></div>
          </el-tab-pane>
          <el-tab-pane label="付费金额(￥)">
            <div class="charts" id='pay'></div>
          </el-tab-pane>
          <el-tab-pane label="新增账号付费人数" >
            <div class="charts" id='person'></div>
          </el-tab-pane>
          <el-tab-pane label="新增账号付费金额(￥)">
            <div class="charts" id='money'></div>
          </el-tab-pane>
        </el-tabs>
        <el-collapse accordion>
          <el-collapse-item>
            <template slot="title">
              点击查看分小时详细数据
              <el-button type="primary" size="mini" class="excel"  @click.stop="excel(2,'点击查看分小时详细数据')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
                <i class="icon iconfont">&#xe7f0;</i> 导出excel
              </el-button>
            </template>
            <el-table :data="tableData2" border style="width: 100%">
              <el-table-column prop="hour" label="日期" width="150" align="center"></el-table-column>
              <el-table-column label="新增账号数" align="center">
                <el-table-column prop="newUserLookValue" :label="date"  align="center"></el-table-column>
                <el-table-column prop="newUserCompareValue" :label="cdate"  align="center"></el-table-column>
              </el-table-column>
              <el-table-column label="付费账号数" align="center">
                <el-table-column prop="payUserLookValue" :label="date"  align="center"></el-table-column>
                <el-table-column prop="payUserCompareValue" :label="cdate"  align="center"></el-table-column>
              </el-table-column>
              <el-table-column label="付费金额(￥)" align="center">
                <el-table-column prop="payLookValue" :label="date"  align="center"></el-table-column>
                <el-table-column prop="payCompareValue" :label="cdate"  align="center"></el-table-column>
              </el-table-column>
              <el-table-column label="新增账号付费人数" align="center">
                <el-table-column prop="newPayUserLookValue" :label="date"  align="center"></el-table-column>
                <el-table-column prop="newPayUserCompareValue" :label="cdate"  align="center"></el-table-column>
              </el-table-column>
              <el-table-column label="新增账号付费金额(￥)" align="center">
                <el-table-column prop="newUserPayLookValue" :label="date"  align="center"></el-table-column>
                <el-table-column prop="newUserPayCompareValue" :label="cdate"  align="center"></el-table-column>
              </el-table-column>
            </el-table>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
    <!--  v-show="filterShow" -->
    <v-advance ref="advance" :countries='countries' :servers="servers" @get="getData" :post-obj='postObj'></v-advance>
    <a href="" :download="xlsx" id="hf"></a>
  </div>
</template>
<script src="./countryRealTime.js"></script>